//Biến tòa cục
var content_width = $(window).width();
var content_height = $(window).height() - $(".header").height();
var $hash = window.location.hash;
var $strHash = $hash.split("/");
var $typeContent = $strHash[1];
var $typeActive = $strHash[2];

var DirectionsDisplay;
var DirectionsService = new google.maps.DirectionsService();
var start;
var end;
var Lat = $(".Lat").val();
var Lng = $(".Lng").val();

//Load Maps Default
function setMaps(status){
    var styles = [
    {
    	"stylers": [
    		{ "invert_lightness": true },
    		{ "color": "#e4e4e4" }
    	]
    },
    {
    	"featureType": "landscape",
    	"stylers": [
    		{ "visibility": "on" },
    		{ "color": "#e4e4e4" }
    	]
    },
    {
    	"featureType": "landscape",
    	"elementType": "labels.text",
    	"stylers": [
    		{ "color": "#000000" },
    		{ "weight": 0.1 }
    	]
    },
    {
    	"featureType": "poi",
    	"stylers": [
    		{ "color": "#e4e4e4" }
    	]
    },
    {
    	"featureType": "poi",
    	"elementType": "labels.text",
    	"stylers": [
    		{ "color": "#000000" },
    		{ "weight": 0.1 }
    	]
    },
    {
    	"featureType": "road",
    	"stylers": [
    		{ "color": "#ffffff" },
    		{ "weight": 2 }
    	]
    },
    {
    	"featureType": "road",
    	"elementType": "icon",
    	"stylers": [
    		{ "color": "#ffffff" }
    	]
    },
    {
    	"featureType": "road.highway",
    	"elementType": "labels.text",
    	"stylers": [
    		{ "color": "#000000" },
    		{ "weight": 0.1 }
    	]
    },
    {
    	"featureType": "road.arterial",
    	"elementType": "labels.text",
    	"stylers": [
    		{ "color": "#000000" },
    		{ "weight": 0.1 }
    	]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        { "color": "#007575" }
      ]
    },
    {
    	"featureType": "road.local",
    	"elementType": "labels.text",
    	"stylers": [
    		{ "color": "#000000" },
    		{ "weight": 0.1 }
    	]
    },
    {
    	"featureType": "transit",
    	"elementType": "labels",
    	"stylers": [
    		{ "color": "#B9A40B" },
    		{ "weight": 0.1 }
    	]
    }
    ];
    
    //Điều hướng bản đồ
    var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    DirectionsDisplay = new google.maps.DirectionsRenderer();
    var ViTriMacDinh = new google.maps.LatLng(Lat, Lng);
    var ThuocTinhHienThi = {
        zoom: 18,
        panControl: false,
        mapTypeControl: false,
        center: ViTriMacDinh
    }
    
    HienThiMaps = new google.maps.Map(document.getElementById("map-canvas"), ThuocTinhHienThi);
    
    HienThiMaps.mapTypes.set('map_style', styledMap);
    HienThiMaps.setMapTypeId('map_style');
    DirectionsDisplay.setMap(HienThiMaps);
    
    if(status == 1){
        var marker = new google.maps.Marker({
    		position: ViTriMacDinh,
            map : HienThiMaps,
            animation: google.maps.Animation.DROP,
    		icon: Path_Folder + 'point.png'
    	});
        
        google.maps.event.addListener(marker, 'click', function() {
            $(".iframe-question").trigger("click");
    	});
    }
    
    //Xóa logo Google
    setTimeout(function(){
        $("img[src='http://maps.gstatic.com/mapfiles/api-3/images/google_white2.png']").remove();
    },2000);
}

//Waypoint A to B
function waypoint(start,end){
    
    /* DANH SÁCH CÁC THUỘC TÍNH & CÔNG DỤNG
    * 1. origin            : Địa điểm bắt đầu (Điểm A)
    * 2. destination       : Địa điểm kết thúc (Điểm B)
    * 3. travelMode        : Loại phương tiện (Đi bộ, Xe ôtô,...)
    * 4. transitOptions    : 
    * 5. unitSystem        : Đơn vị tính độ dài
    * 6. durationInTraffic : Tính toàn thời gian đi từ A đến B (Có tính đến điều kiện giao thông hiện tai). Tính năng này chỉ có sẵn cho Maps cho khách hàng kinh doanh.
    * 7. waypoints[]
    * 8. optimizeWaypoints : Tìm đường đi tối ưu nhất.
    * 9. provideRouteAlternatives : Tìm nhiều đường
    * 10.avoidHighways     : Loại bỏ đường cao tốc
    * 11.avoidTolls        : Loại bỏ đường có tính phí đường bộ
    * 12.region            : Chọn khu vực
    * Tham khảo: https://developers.google.com/maps/documentation/javascript/directions
    */
    //if(start != $(".pointB").val()){ $(".myPoint").val(start) }
    //if(end != $(".pointB").val()){ $(".myPoint").val(end) }

    var request = {
        origin: start, //Địa điểm bắt đầu (Điểm A)
        destination: end, //Địa điểm kết thúc (Điểm B)
        waypoints: [],
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    };
    
    DirectionsService.route(request, function(response, status){
        if(status = google.maps.DirectionsStatus.OK){
            DirectionsDisplay.setDirections(response);
            console.log(response);
        }
    });
}

//Auto Complete Point
function point_complete(){
    $(".myPoint").geocomplete({
        map : ".map-canvas",
        types: ["geocode", "establishment"],
    });
}

function Point_complete(element){
    $(element).geocomplete({
        types: ["geocode", "establishment"]
    });
}

//WhatsNearby
function whatsnearby(address){
    if(address != ""){
        var value = $(".type_nearby").val();
        $(".map-canvas").html("");
        $(".map-canvas").whatsnearby({
            zoom:15,
            width:"100%",
            height:"100%",
            address: address,
    		placesRadius: 2000,
    		placesTypes: [ value ],
            placesTypesIcon : [ $("."+value).data("icon") ]
        });
    }
    
}

//Khởi tạo jQuery
$(function(){ 
    //Set Maps Size
    $(".wraper").width(content_width);
    $(".wraper").height(content_height);
    
    $(window).resize(function(){
        content_width = $(window).width();
        content_height = $(window).height() - $(".header").height();
        $(".wraper").width(content_width);
        $(".wraper").height(content_height);
    });
    
    //Tab Menu
    $(".list-tab .item .tag").click(function(){
        var type = $(this).data("type");
        switch(type){
            case 1:
                $(".list-tab .item").each(function(index){
                    $(this).width($(this).children("a").children(".tag").width());
                });
                $(this).parents(".item").animate({
                    width : 500
                },200,function(){
                   //alert(Okie); 
                });
                break;
            case 2:
                $(".list-tab .item").each(function(index){
                    $(this).width($(this).children("a").children(".tag").width());
                });
                $(this).parents(".item").animate({
                    width : 500
                },200,function(){
                   //alert(Okie); 
                });
                break;
            case 3:
                $(".list-tab .item").each(function(index){
                    $(this).width($(this).children("a").children(".tag").width());
                });
                $(this).parents(".item").animate({
                    width : 500
                },200,function(){
                   //alert(Okie); 
                });
                break;
            
        }
    });
    
    //Set Tab Menu Show Default
    if($typeActive == "nearby"){ $(".item.p-nearby .tag").trigger("click"); }
    else if($typeActive == "waypoint"){ $(".item.p-waypoint .tag").trigger("click"); }
    else if($typeActive == "point"){ $(".item.p-point .tag").trigger("click"); }
    
    //Point
    $(".myPoint").keypress(function(){
        point_complete();
    });
    
    $(".waypoint-redirect").live("click",function(){
        var A = $(".PointA").val();
        var B = $(".PointB").val();
        $(".PointA").val(B);
        $(".PointB").val(A);
        $(".waypoint-search").trigger("click");
    });
    
    $(".point-search").click(function(){
      $(".myPoint").trigger("geocode");
    });
    
    //Waypoint
    Point_complete(".PointA");
    Point_complete(".PointB");
    Point_complete(".NearbyPoint");
    
    $(".waypoint-search").live("click", function(){
        var A = $(".PointA").val();
        var B = $(".PointB").val();
        setMaps(0);
        waypoint(A,B);
    });
    
    //WhatsNearby
    $(".nearby-search").live("click",function(){
        whatsnearby($(".NearbyPoint").val());
    });
    
    
    //
    setMaps(1);
});